<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="js/pixi.min.js"></script>
    <script src="js/pixi-spine.js"></script>

    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%
        }

        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: 0xff;
        }

        #spineView {
            width: 800px;
            height: 900px;
        }

        .spineSwitch {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .spine_difference {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
        }

        .spine_difference div {
            background-color: rgba(66, 66, 66, 0.3);
            width: 13px;
            height: 30px;
            float: left;
            margin: 0px 3px;
            transition-duration: 0.3s;
        }

        .spine_difference div:hover {
            width: 25px;
            height: 50px;
            box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="spineView">
            <div class="spine_difference"></div>
        </div>
    </div>
</body>
<script>

    var canvasWidth = document.getElementById('spineView').clientWidth;
    var canvasHeight = document.getElementById('spineView').clientHeight;
    var spineDifferenceCount = 30;//差分表情总数
    var winkTImer;//眨眼计时器
    var curExpression = 0;//当前标签Name
    var fileName = "mika_spr";

    const app = new PIXI.Application({
        backgroundColor: 0xFFFFFF,
        antialias: true,
        width: canvasWidth,
        height: canvasHeight,
    });
    app.view.className += "spineDiv";
    app.view.setAttribute("id", "spineDiv");

    document.getElementById('spineView').prepend(app.view);//div

    let loader = PIXI.loader.add('ordylan', './data/spine/' + fileName + '/' + fileName + '.json');//OD.json你的json

    loader.load((loader, res) => {
        let ordylan = new PIXI.spine.Spine(res.ordylan.spineData),
            options = [''];
        ordylan.scale.set(0.3);//放大倍数
        ordylan.state.setAnimation(0, 'Idle_01', true);//loop你的动画名字 true 为循环播放
        ordylan.state.setAnimation(1, '00', true);

        ordylan.x = canvasWidth / 2;//O点在中间,所以xy 坐标 长宽除以二(导出记得把动画放在中央)
        ordylan.y = canvasHeight / 2 + 50;

        app.stage.addChild(ordylan);

        //创建眨眼计时器
        var winkTImer = setInterval(function () {
            if (curExpression == 0) {
                app.stage.children[0].state.setAnimation(1, 'Eye_Close_01', false);
            }
        }, 3000);

    });

    //创建差分选项
    for (var i = 0; i < spineDifferenceCount; i++) {
        var cutEnelemt = document.getElementsByClassName('spine_difference')[0].appendChild(document.createElement("div"));
        cutEnelemt.setAttribute("id", "sd_" + i);
        cutEnelemt.onmouseover = function () {
            var idName = this.getAttribute("id");
            var index = idName.substring(idName.lastIndexOf("_") + 1);

            if (index < 10)
                index = "0" + index;

            app.stage.children[0].state.setAnimation(1, index, false);
            curExpression = index;
        };
    }



</script>

</html>